<script setup lang='ts'>
import {} from 'vue'
import {primaryColor_rgb,primaryColorFade} from "@/theme/config"


const bgColorFrom=primaryColor_rgb
const bgColorTo=primaryColorFade(0.1)

</script>

<template>
<div class="userLayout">
   
   <div class="topbar">
   <h1 class="title">顶部栏</h1>
  </div>
  
  <div class="main">
   <div class="form">
   <slot></slot>
   </div>
    
  </div>
 </div>
</template>

<style scoped lang="scss">
.userLayout{
  width: 100%;
  background: linear-gradient(to right,v-bind(bgColorFrom),v-bind(bgColorTo));

.topbar{
    width: 100%;
    height: 60px;
    line-height: 60px;
    background-color: rgba(0,0,0,0.6);
     .title{
       color: white;
       font-size: 20px;
       font-family: cursive;
       margin-left: 10px;
      
     }
  }

  .main{
    min-height: calc(100vh - 60px);
    overflow: hidden;
    background: linear-gradient(to right,v-bind(bgColorFrom),v-bind(bgColorTo));
      
     .form{
      //  margin: 200px 200px 0 200px;
      margin: 20vh 0 0 20vh;
       padding: 28px;
       width: 500px;
       background-color: white;
    
     }
  }
}
</style>